<template>
	<view class="warp">
		<view class="uni-margin-wrap">
			<view class="uni-back-view">
				<view class="uni-view-item">
					<view class="uni-view-item-view">
						<view class="uni-view-item-view-title"><text class="text">收货人:</text></view>
						<view class="uni-view-item-view-body">
							<view class="uni-view-item-view-body-left">
								<!-- <view class="uni-view-item-view-body-left-image">
									<image class="image" :src="'/static/login/login_username.png'"></image>
								</view> -->
								<view class="uni-view-item-view-body-left-input">
									<input class="uni-input input" type="text" placeholder="请输入用户姓名" v-model="addressData.username" />
									<view class="bottom-line"></view>
								</view>
							</view>
							<!-- <view class="uni-view-item-view-body-right">
								<image class="image" :src="'/static/address/address_user.png'"></image>
							</view> -->
						</view>
					</view>
					<view class="uni-view-item-view">
						<view class="uni-view-item-view-title"><text>手机号:</text></view>
						<view class="uni-view-item-view-body">
							<view class="uni-view-item-view-body-left">
								<!-- <view class="uni-view-item-view-body-left-image">
									<image class="image" :src="'/static/login/login_mobile.png'"></image>
								</view> -->
								<view class="uni-view-item-view-body-left-input">
									<input class="uni-input input" type="text" placeholder="请输入用户手机号" v-model="addressData.mobile" />
									<view class="bottom-line"></view>
								</view>
							</view>
							<!-- <view class="uni-view-item-view-body-right">
								<image class="image"  ></image>
							</view> -->
						</view>
					</view>
					<view class="uni-view-item-view">
						<view class="uni-view-item-view-title"><text>所在区域:</text></view>
						<view class="uni-view-item-view-body"  >
							<view class="uni-view-item-view-body-left uni-view-item-view-body-left1">
							
								<view class="uni-view-item-view-body-left-input text-view">
									<!-- <text class="text">{{check.isNull(addressData.area) ? '请选择所在区域' : addressData.area}} </text> -->
									
									<picker mode="multiSelector" @change="bindPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray" range-key="name">
										 <text class="text">{{check.isNull(addressData.area) ? '请选择所在区域' : addressData.area}} </text> 		
									</picker>
								</view>
								<view class="bottom-line" style="width: 100%;"></view>
							</view>
							
						</view>
					</view>
					<view class="uni-view-item-view">
						<view class="uni-view-item-view-title"><text>详细地址:</text></view>
						<view class="uni-view-item-view-body">
							<view class="uni-view-item-view-body-left">
								<!-- <view class="uni-view-item-view-body-left-image">
									<image class="image" :src="'/static/address/address_info.png'"></image>
								</view> -->
								<view class="uni-view-item-view-body-left-input">
									<input class="uni-input input" type="text" placeholder="请输入详细地址" v-model="addressData.address" />
									<view class="bottom-line"></view>
								</view>
							</view>
							<view class="uni-view-item-view-body-right">
								<image class="image" :src="'/static/address/address_location.png'"></image>
							</view>
						</view>
					</view>
					<view class="uni-view-item-view">
						<view class="uni-view-item-view-title"><text>地址类型:</text></view>
						<view class="uni-view-item-view-body">
							<radio-group class="uni-radio-view" @change="radioChange">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
									<view>
										<radio color="#f39e00" style="transform:scale(0.7)" :value="item.value" :checked="index === current" /></view>
									<view style="font-size: 28rpx;">{{ item.name }}</view>
								</label>
							</radio-group>
						</view>
					</view>
				</view>
				<view class="uni-view-bottom">
					<view class="btn" @click="submitClick"><text class="text">提交</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			address: {},
			items: [{
					value: '1',
					name: '收货地址',
					checked: 'true'
				},
				{
					value: '2',
					name: '发货地址',
					
				}
			],
			current: 0,
			addressData:{
				username:'',
				mobile:'',
				area:'',
				province:'',
				province_id:'',
				city:'',
				city_id: '',
				county:'',
				county_id:'',
				address:'',
				latitude:'',
				longitude:'',
				addressType:'',
			},
			parent_id:'1',
			multiArray: [[],[],[]],
			multiIndex: [0, 0, 0],
		};
	},
	onLoad(option) {
		if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
		// #ifdef APP-PLUS
		var obj = JSON.parse(option.obj);
		// #endif

		// #ifdef MP-WEIXIN
		var obj = JSON.parse(decodeURIComponent(option.obj));
		// #endif
		this.address = obj;
		console.log(obj)
		if (this.address.type == 1) {
			uni.setNavigationBarTitle({
				title: '编辑地址'
			});
			if (this.address.address.type == 1) {
				this.current = 0;
			}else{
				this.current = 1;
			}
		} else {
			uni.setNavigationBarTitle({
				title: '添加地址'
			});
		}
		this.getAddressData(0,true);
	},
	watch:{
		// 'addressData.province':function(val, oldVal) {
		// 	this.getAddressInfo();
		// },
		// 'addressData.city':function(val, oldVal) {
		// 	this.getAddressInfo();
		// },
		// 'addressData.county':function(val, oldVal) {
		// 	this.getAddressInfo();
		// },
		
		current(newval, oldval) {
			//    1收货方 2发货方
			if (newval == 1) {
				this.addressData.addressType = '1';
			} else {
				this.addressData.addressType = '2';
			} 
		},
	},
	methods: {
		bindPickerChange: function(e) {
			this.addressData.area = this.addressData.province + '-' + this.addressData.city + '-' + this.addressData.county;
		},
		bindMultiPickerColumnChange: function(e) {
			this.multiIndex[e.detail.column] = e.detail.value
			switch (e.detail.column) {
				case 0: //拖动第1列
					var item = this.multiArray[0][e.detail.value];
					this.parent_id = item.id;
					this.addressData.province = item.name;
					this.addressData.province_id = item.id;
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
					this.getAddressData(1,true);
					break
				case 1: //拖动第2列
				
					var item = this.multiArray[1][e.detail.value];
					this.parent_id = item.id;
					this.addressData.city = item.name;
					this.addressData.city_id = item.id;
					this.multiIndex.splice(2, 1, 0)
					this.getAddressData(2,true);
					break
				case 2: //拖动第3列
					var item = this.multiArray[2][e.detail.value];
					this.addressData.county = item.name;
					this.addressData.county_id = item.id;
					break
			}
			this.$forceUpdate()
		},
		
		radioChange(evt) {
			for (let i = 0; i < this.items.length; i++) {
				if (this.items[i].value === evt.detail.value) {
					this.current = i;
					break;
				}
			}
		},
		
		areaClick(){
			 
		},
		getAddressData(type,first){
			var data = {
				parent_id:this.parent_id
			}
			 this.http.sendRequest({
			 	api: this.api.address.utilsAreaEditApi,
			 	data: data,
			 	success: res => {
			 		if (res.success == 'true' && res.data) {
			 			if(type == 0){
							var province = res.data.list;
							this.multiArray[0] = province;
							if(first){
								var item = province[0];
								this.parent_id = item.id;
								this.addressData.province = item.name;
								this.addressData.province_id = item.id;
								this.getAddressData(1,true);
							}
						}else if(type == 1){
							var city = res.data.list;
							this.multiArray[1] = city;
							if(first){
								var item = city[0];
								this.parent_id = item.id;
								this.addressData.city = item.name;
								this.addressData.city_id = item.id;
								this.getAddressData(2,true);
							}
						}else{
							var county = res.data.list;
							var item = county[0];
							this.addressData.county = item.name;
							this.addressData.county_id = item.id;
							this.multiArray[2] = county;
						}
			 		}
			 	}
			 });
		},
		submitClick(){
			if (this.address.type == 1) {
				 this.editAddressLoadData();
			} else {
				this.addAddressLoadData();
			}
		},
		addAddressLoadData() {
			var data = {
				name: this.addressData.username,
				mobile: this.addressData.mobile,
				province_id: this.addressData.province_id,
				city_id: this.addressData.city_id,
				county_id: this.addressData.county_id,
				latitude: this.addressData.latitude,
				longitude: this.addressData.longitude,
				address: this.addressData.address,
				type: this.addressData.addressType
			};
			this.$refs.loadingCover.show();
			this.http.sendRequest({
				api: this.api.address.shippersAddressAddApi,
				data: data,
				success: res => {
					console.log(res)
					if (res.success == 'true' && res.data) {
						
					}
					uni.showToast({
						title:res.message
					})
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res =>{
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},

		editAddressLoadData() {
			var data = {
				address_id: this.address.address.address_id,
				name:this.addressData.username,
				mobile: this.addressData.mobile,
				province_id: this.addressData.province_id,
				city_id: this.addressData.city_id,
				county_id: this.addressData.county_id,
				latitude: this.addressData.latitude,
				longitude: this.addressData.longitude,
				type: this.addressData.address,
				address:this.addressData.addressType
			};
			this.$refs.loadingCover.show();
			this.http.sendRequest({
				api: this.api.address.shippersAddressEditApi,
				data: data,
				success: res => {
					console.log(res)
					if (res.success == 'true' && res.data) {
						
					}
					uni.showToast({
						title:res.message
					})
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res =>{
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		}
	}
};
</script>

<style lang="scss">
.uni-back-view {
	width: 100%;
	height: 100%;
	background-color: #eee;
}

.uni-view-item {
	margin-top: 48rpx;
	margin-right: 32rpx;
	margin-left: 32rpx;
	padding-top: 32rpx;
	padding-bottom: 16px;
	padding-left: 32rpx;
	padding-right: 32rpx;
	border-radius: 12rpx;
	// width: 100%;
	background-color: #fff;
	.uni-view-item-view {
		// width: 100%;
		// height: 110rpx;
		// margin-left: 32rpx;
		// margin-right: 32rpx;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.uni-view-item-view-title {
			width: 160rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding-top: 16rpx;
			padding-bottom: 16rpx;
			.text {
				color: #333;
				font-size: 28rpx;
				font-weight: bold;
			
			}
		}
		.uni-view-item-view-body {
			width: 100%;
			// height: 100%;
			margin-top: 16rpx;
			margin-bottom: 16rpx;
			margin-left: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.uni-view-item-view-body-left {
				width: 100%;
				display: flex;
				// border: 3rpx solid #e04b28;

				background-color: #fff;
				.uni-view-item-view-body-left-image {
					display: flex;
					align-items: center;
					.image {
						flex: inherit;
						width: 60rpx;
						height: 60rpx;
					}
				}

				.uni-view-item-view-body-left-input {
					width: 100%;
					.text {
						color: $uni-text-color-primary;
					}
					
				}
				.text-view{
					padding-top: 16rpx;
				    padding-bottom: 16rpx;
					padding-left: 25rpx;
					
				}
				.bottom-line{
					margin-left: 16rpx;
					margin-right: 16rpx;
					height: 1rpx;
					background-color: $uni-bottom-line-color;
				}
			}
			.uni-view-item-view-body-left1{
				    display: flex;
				    flex-direction: column;
				    align-items: center;
					padding-left: 16rpx;
					    padding-right: 16rpx;
			}
			.uni-view-item-view-body-right {
				width: 60rpx;
				display: flex;
				align-items: center;
				    margin-left: 16rpx;
				    margin-right: 16rpx;
				.image {
					flex: inherit;
					width: 60rpx;
					height: 60rpx;
				}
			}
			
		}
	}
	
}
.uni-view-bottom{
		width: 100%;
		height: 180rpx;
		margin-top: 64rpx;
		.btn{
			margin-left:32rpx;
			margin-right: 32rpx;
			height: 90rpx;
			background-color: $uni-btn-color-primary;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 16rpx;
			.text{
				color: #fff;
				font-size:28rpx;
			}
		}
	}
.uni-radio-view{
	display: flex;
	justify-content: flex-start;
}
.uni-list-cell-pd{

	padding: 0rpx 32rpx 0rpx 0rpx;
}
.uni-list-cell::after{
	    position: absolute;
	    z-index: 3;
	    right: 0;
	    bottom: 0;
	    left: 30rpx;
	    height: 0px;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #fff;
}
.uni-flex-vcenter {
	display: flex;
	align-items: center;
}
</style>
